<template>
    <div>
        <el-form :inline="true">
            <el-form-item>
                <el-input
                        v-model="searchForm.username"
                        placeholder="用户名"
                        clearable
                >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getUserList">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="dialogVisible = true">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-popconfirm title="确认删除?" @confirm="delHandle(null)" >
                    <template #reference>
                        <el-button type="danger" slot="reference" :disabled="delBtlStatus">批量删除</el-button>
                    </template>
                </el-popconfirm>
            </el-form-item>
        </el-form>

        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                stripe
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="username"
                    label="用户名"
                    show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                    prop="email"
                    label="邮箱"
                    show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                    prop="phone"
                    label="手机号码"
                    show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                    prop="created"
                    label="创建时间"
                    show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                    prop="statu"
                    label="状态">
                <template v-slot="scope">
                    <el-tag size="small" v-if="scope.row.statu === 1" type="success">正常</el-tag>
                    <el-tag size="small" v-else-if="scope.row.statu === 0" type="danger">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="icon"
                    label="操作"
                    width="300">
                <template v-slot="scope">
                    <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>

                    <el-divider direction="vertical"></el-divider>

                    <el-popconfirm title="确认删除?" @confirm="delHandle(scope.row.id)">
                        <template #reference>
                            <el-button type="text" slot="reference" >删除</el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>

        </el-table>
<!--        <div class="demo-pagination-block">-->
        <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                v-model:currentPage="current"
                v-model:page-size="size"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        >
        </el-pagination>
<!--        </div>-->

        <!--        新增对话框-->
        <el-dialog
                title="提示"
                v-model="dialogVisible"
                modelValue="editForm"
                width="40%"
                :before-close="handleClose">
            <el-form :model="editForm" :rules="editFormUsers" ref="editForm" class="demo-editForm">

                <div class="formItem">
                    <el-form-item label="用户名" prop="username" label-width="100px">
                        <el-input v-model="editForm.username" autocomplete="off"></el-input>
                    </el-form-item>
                </div>

                <div class="formItem">
                    <el-form-item label="密码" prop="password" label-width="100px">
                        <el-input v-model="editForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                </div>

                <div class="formItem">
                    <el-form-item label="邮箱" prop="email" label-width="100px">
                        <el-input v-model="editForm.email" autocomplete="off"></el-input>
                    </el-form-item>
                </div>

                <div class="formItem">
                    <el-form-item label="手机号码" prop="phone" label-width="100px">
                        <el-input v-model="editForm.phone" autocomplete="off"></el-input>
                    </el-form-item>
                </div>

                <div class="formItem">
                    <el-form-item label="状态" prop="statu" label-width="100px">
                        <el-radio-group v-model="editForm.statu">
                            <el-radio :label=0>禁用</el-radio>
                            <el-radio :label=1>正常</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>

                <div slot="footer" class="formItem">
                    <el-button @click="resetForm('editForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
                </div>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>

    var reg_tel_phone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

    export default {
        name: "User",
        data() {
            return {
                searchForm: {
                    username: ''
                },
                editForm: {
                    statu: 0,
                },
                editFormUsers: {
                    username: [
                        {required: true, message: '请输入角色名称', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入唯一编码', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur',},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'],},
                    ],
                    phone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur',},
                        { pattern: reg_tel_phone , message: '请输入正确的手机号码', trigger: ['blur', 'change'],},
                    ],
                    statu: [
                        {required: true, message: '请选择状态', trigger: 'blur'}
                    ],
                },
                delBtlStatus: true,
                total: 0,
                size: 10,
                current: 1,
                avatar: '',
                dialogVisible: false,
                tableData: [],
                multipleSelection: [],
                permDialogVisible: false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                rePwdDialogVisible: false,
                rePwdForm: {},
                promTreeData: [],
            }
        },
        created() {
            this.getUserList()
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.delBtlStatus = val.length == 0
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.size = val
                this.getUserList()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.current = val
                this.getUserList()
            },
            resetForm(formName) {
                this.dialogVisible = false
                this.editForm = {
                    statu: 0,
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.resetForm('editForm')
                    })
                    .catch(_ => {
                    });
            },
            getUserList() {
                this.$axios.get("/sys/user/list" , {
                    params: {
                        username: this.searchForm.username,
                        current: this.current,
                        size: this.size
                    }
                }).then(res => {
                    console.log("res")
                    console.log(res)
                    this.tableData = res.data.data.records
                    this.size = res.data.data.size
                    this.current = res.data.data.current
                    this.total = res.data.data.total
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post("/sys/user/" + (this.editForm.id ? 'update' : 'save'), this.editForm)
                            .then(res => {

                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    onClose: () => {
                                        this.getUserList()
                                    }
                                });
                                this.dialogVisible = false
                                this.editForm = {
                                    statu: 0,
                                }
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            editHandle(id) {
                this.$axios.get("sys/user/info/" + id).then(res => {

                    this.editForm = res.data.data

                    this.dialogVisible = true
                })
            },
            delHandle(id) {
                var ids = []
                if (id) {
                    ids.push(id)
                } else {
                    this.multipleSelection.forEach(row => {
                        ids.push(row.id)
                    })
                }
                this.$axios.post("sys/user/delete", ids).then(res => {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        onClose: () => {
                            this.getUserList()
                        }
                    });
                })
            }
        }
    }
</script>

<style scoped>

    .el-pagination {
        float: right;
        margin-top: 22px;
    }

    template {
        display: block;
    }

    .formItem {
        width: 70%;
        margin-bottom: 22px;
        margin: 0 auto;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .demo-pagination-block + .demo-pagination-block {
        margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
        margin-bottom: 16px;
    }
</style>